<template>
  <div class="main-content">
    <div :class="{mt56: index !== 0}" v-for="(item,index) in list" :key="index">
      <div class="title">{{item.title}}</div>
      <div class="info">{{item.text}}</div>
      <img class="icon" :src="item.icon" alt="">
    </div>
  </div>
</template>
<script setup lang="ts">
import h5 from '~/assets/home/h5.png'
import pc from '~/assets/home/pc.png'
import applet from '~/assets/home/applet.png'

let list = [{
  icon: h5,
  title: '一站式数据可视化展示平台',
  text: '支持H5、小程序、uin-app、pc等多平台数据采集，打破企业数据孤岛，整合、处理和应用用户数据，放大数据资产价值。'}
, {
  title: '前端实时流量大屏',
  icon: pc,
  text: '针对前端最关键的12大指标进行实时监控，让你实时了解各项指标的变化趋势，跟进上线安全状况。'
}, {
  title: '运营数据统计分析',
  icon: applet,
  text: '数据“采集+管理+分析”智能一体化，获取运营关键数值，让您对项目运营状况了如指掌。'
}]

</script>

<style lang="stylus" scoped>
@import '~/styles/common.styl';
.main-content
  padding 32px 20px 0
  .mt56
    margin-top 56px
  .title
    font-size 18px
    font-weight 500
    color #393F56
    line-height 25px
  .info
    font-size 16px
    font-weight 400
    color #828594
    line-height 28px
    margin-top 17px
  .icon
    width 100%
    margin-top 32px

</style>